<template>
    <main-wrap ref="mianEle" :loading="true" :load="onLoad" :end="page.finished" :showOverTxt="page.lists.length>0">
        <template v-slot:header>
                <Header title="拍卖会"/>
                <div class="ctopBox">
                    <my-tab v-model="active" :lists='[
                        {title:"全部",name:0},
                        {title:"预告",name:1},
                        {title:"进行中",name:2},
                        {title:"拍卖结束",name:3},
                        ]' 
                        :space="true" 
                        @change="getData"/>
                </div>
        </template>
        
        <ul class="auctionList">
            <li v-for="dt in page.lists" :key="dt.goodsId">
                <router-link :to="'/detail/'+dt.goodsId+'?type=2'">
                    <photo-frame>
                        <div class="imgBox">
                            <img :src="dt.imageUrl" style="display: block;width:100%"/>
                                <div class="status">
                                    <i class="iconfont icon-shijian"></i>
                                    <template v-if="mt.diff(dt.auctionStartTime)>0">
                                        <b>预告</b> {{mt.dateFormat(dt.auctionStartTime)}} 开始
                                    </template>
                                    <template v-else-if="mt.diff(dt.auctionStartTime)<0 && mt.diff(dt.auctionEndTime)>0">
                                        <b>进行中</b> {{mt.dateFormat(dt.auctionEndTime)}} 结束
                                    </template>
                                    <template v-else-if="mt.diff(dt.auctionEndTime)<0">
                                        <b>拍卖结束</b>
                                    </template>
                                </div>
                        </div>
                    </photo-frame>
               
                    <div class="txtBox">
                        <h3>{{dt.title}}</h3>
                        <div class="name wrapfix">
                            <img src="/images/rz2.png" alt=""> 艺术家：{{dt.artistNick}}
                        </div>
                        <p>{{dt.subtitle}}</p>
                    </div>
                </router-link>
            </li>
        </ul>
        <empty v-if="page.finished && page.lists.length<1"/>
        
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import {Toast} from 'vant'
import Header from '@/components/header.vue'
import mainWrap from '@/components/mainWrap.vue'
import myTab from '@/components/myTab.vue'
import photoFrame from '@/components/photoFrame.vue'
import empty from '@/components/empty.vue'
import {mt} from '@/utils/common.js'
export default {
    components:{
        mainWrap,
        Header,
        myTab,
        photoFrame,
        empty
    },
    setup(props,context){
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            active:0,
            page:{
                lists:[],
                pageIndex:1,
                pageSize:10,
                finished: false
            },
            st:''
        })

        onMounted(()=>{
           onLoad()
        })

        const onLoad = ()=> {
            state.st && clearTimeout(state.st)
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                state.st = setTimeout(async () => {
                    const res = await store.dispatch("arApi/get_auction_list", {
                        page: state.page.pageIndex,
                        limit: state.page.pageSize,
                        auctionStatus:state.active || ''
                        //orderField: "",
                        //orderType: "",
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    if (state.page.lists.length >= res.total) {
                        state.page.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

        const getData = async ()=>{
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }

        return {
            ...toRefs(state),
            mt,
            onLoad,
            getData
        }
    }
}
</script>

<style lang="scss" scoped>
    .ctopBox{
        padding: 15px 38px 0 38px;
    }
    .auctionList{
        list-style: none;
        padding: 0 0 30px 0;
        margin: 0;
        overflow: hidden;
        li{
            width: 100%;
            margin: 40px 0 0 0;
            padding: 0 40px;
            a{
                display: block;
                width: 100%;
                margin: 0 auto;
                
            }
            .imgBox{
                position: relative;
                z-index: 12;
                .status{
                    display: flex;
                    position: absolute;
                    z-index: 12;
                    width: 100%;
                    height: 80px;
                    left:0;
                    bottom: 0;
                    background: rgba(214, 53, 53, 0.7);
                    align-items: center;  
                    justify-content: center;
                    font-size: 30px;
                    padding: 0 0 0 5px;
                    margin: 0;
                    b{
                        padding: 0 10px 0 0 ;
                    }
                    i{
                        padding: 0 8px 0 0;
                    }
                }
            }
            .txtBox{
                width: 100%;
               // min-height: 300px;
                background: linear-gradient(180deg, #27A6A6 0%, #0E6161 70%, #014343 100%);
                border-radius: 0px 0px 0px 0px;
                opacity: 1;
                padding: 28px 30px;
                h3{
                    font-size: 30px;
                }
                .name{
                    display: inline-block;
                    height: 52px;
                    font-size: 24px;
                    line-height: 52px;
                    padding: 0 15px;
                    background: url('/images/rz.png') left top no-repeat;
                    background-size: 100% 100%;
                    overflow: hidden;
                    margin: 20px 0 0 0;
                    img{
                        float: left;
                        display: block;
                        width: 26px;
                        margin: 12px 7px 0 0;
                    }
                }
                p{
                    font-size: 28px;
                    line-height: 46px;
                    padding: 10px 0 0 0;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    line-clamp: 3;
                    -webkit-box-orient: vertical;
                    max-height: 150px;
                }
            }
        }
    }
</style>